<template>
    <div class="goods-list">
         <!-- <router-link class="goods-item" v-for='item in goodsData' :key="item.id" :to="'/home/goodsInfo/'+item.id" tag='div'> -->
            <div class="goods-item" v-for='item in goodsData' :key="item.id" :to="'/home/goodsInfo/'+item.id" @click='getDetail(item.id)'><!-- 还有另外的一种方法就是在js里面操作 -->
             <div class="item-img">
               <img :src="item.src" alt="">
             </div>
             <div class="item-title">
              <p>{{item.title}}</p>  
             </div>
             <div class="item-price">
        
                <span>￥{{item.newPrice}}</span>
                <span>￥{{item.oldPrice}}</span>
             </div>
             <div class="item-status">
                 <p>
                     <span>热卖中</span>
                     <span>剩余：{{item.count}}</span>
                 </p>
             </div>
             </div>
         <!-- </router-link> -->
    </div>
</template>
<script>
export default {
    data(){
        return{
          goodsData:''
        }
    },
    created(){
    this.getAllGoods()
    },
    methods:{
        getAllGoods(){
            this.$http.get('goodsList.json').then(resolve=>{
                if(resolve.body.status == 0){
                   this.goodsData = resolve.body.message;
                }
            })
        },
        getDetail(id){
            console.log(this)
        //1.这是最简单的
        //  this.$router.push('/home/goodsInfo/'+id)

        //2.传递对象
        // this.$router.push({path:'/home/goodsInfo/'+id})

        // 3.通过name和params传递参数,里面还是一个对象
        this.$router.push({name:'goodsInfo',params:{id}}) //一般对于别人已经封装好了的，都是以对象的形式访问
        }
    }
};
</script>
<style lang="scss">
.goods-list {
  width: 100%;
  margin: 2px;
  .goods-item {
    height: 300px;
    width: 49%;
    border: 1px solid #ccc;
    float: left;
    margin-bottom: 5px;
    margin-left: 2px;
    .item-img {
      height: 180px;
      width: 100%;
      img {
        height:180px;
        width: 100%;
      }
    }
    .item-title {
      height: 80px;
      width: 100%;
      max-height: 75px;
      overflow: hidden;
      p {
        font-size: 15px;
        text-align: left;
        font-weight: 500;
        padding: 3px 3px;
      }
    }
    .item-price {
      height: 20px;
      width: 100%;
      margin: 0;
      span {
        display: block;
        line-height: 20px;
        font-size: 14px;
        color: #999;
      }
      span:nth-child(1) {
        margin-left: 5px;
        float: left;
        font-size: 16px;
        color: red;
        font-weight: 500;
      }
      span:nth-child(2) {
        margin-right: 5px;
        float: right;
        text-decoration: line-through;
      }
    }
    .item-status {
      height: 20px;
      width: 100%;
      margin-top: -5px;
      span{
          line-height: 20px;
          font-size: 14px;
      }
      span:nth-child(1) {
        margin-left: 5px;
        float: left;
      }
      span:nth-child(2) {
        margin-right: 5px;
        float: right;
      }
    }
  }
}
</style>
